<template>
  <div class="ruleAddDialog">
    <el-dialog v-model="visible" :close-on-press-escape="false" :close-on-click-modal="false" align-center
      :show-close="false" class="dialogAdd">
      <div class="my-header">
        <div class="title" style="display: flex; align-items: center;">
          <img src="@/assets/images/rectangle07.png" alt="">
          <div class="titleText">新增工单</div>
        </div>
      </div>
      <div class="dialog_content">
        <div class="left">
          <el-form class="form" :model="ruleFormData.ruleForm" label-width="auto" label-position="right">
            <el-form-item label="规则名称">
              <el-input v-model="ruleFormData.ruleForm.name" placeholder="规则名称"></el-input>
            </el-form-item>
            <el-form-item label="工单类型" prop="stationName">
              <el-select v-model="ruleFormData.ruleForm.useType" class="m-2" placeholder=" " clearable>
                <el-option label="卡座" :value="1" />
                <el-option label="独立办公间" :value="2" />
                <el-option label="独立办公室" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="ruleFormData.ruleForm.name" placeholder="规则名称"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-radio-group v-model="ruleFormData.ruleForm.type" class="ml-4">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div>
            <div class="table_title">已选择发送对象</div>
            <el-table ref="tableRef" :data="tableData.list" style="width: 100%;" border stripe empty-text="暂无数据"
              :max-height="170" :scrollbar-always-on="true">
              <el-table-column type="index" label="序号" width="58" />
              <el-table-column property="alarmTypeName" label="部门/班组" />
              <el-table-column property="alarmTypeName" label="姓名" />
              <el-table-column label="操作" width="75px" class-name="fixed_column" fixed="right">
                <template #default="scope: any">
                  <div class="btn_ative" title="删除">
                    <img class="operation_btn" src="@/assets/images/images_new/table_del.png" alt="">
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="right">
          <div>
            <span class="right_text"><span class="required">*</span>工单接收对象</span>
            <div>
              <el-input v-model="ruleFormData.ruleForm.name" placeholder="请输入工单接收对象关键字" :prefix-icon="Search" />
            </div>

          </div>

          <div class="platform_tree">
            <el-scrollbar height="236px" always>
              <el-tree ref="treeRef" :default-expanded-keys="expanded_keys" :props="defaultProps" node-key="id"
                :data="platformData.list" show-checkbox @check-change="handleCheckChange"
                :filter-node-method="filterNode" />
            </el-scrollbar>
          </div>
        </div>
      </div>

      <div class="btn">
        <el-button type="warning" @click="handleConfirm(ruleFormRef)">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
  type_dialog: {
    type: String,
    default: ''
  },
  dialogVisible: {
    type: Boolean,
    default: false
  },
  detailObj: {
    type: Object,
    default: {}
  }
})

let visible = ref(false);


const ruleFormData = reactive({
  ruleForm: {
    area: null,//面积
    buildingId: "",//建筑物区域id
    buildingName: "",//建筑物区域名称
    companyDeptId: "",//所属部门id
    companyDeptName: "",//所属部门名称
    companyDeptUserId: "",//所属人员id
    companyDeptUserName: "",//所属人员名称
    companyId: "",//所属企业id
    companyName: "",//所属企业名称
    floorId: "",//楼层id
    floorName: "",//楼层名称
    roomId: "",//房间id
    roomName: "",//房间名称
    roomNumber: "",//房间编号
    state: 0,//状态：1-占用，2-空闲
    stationName: "",//工位名称
    stationNum: "",//工位编号
    type: 0,//工位类型：1-固定工位，2-共享工位
    useType: null, //办公位置类型：1-卡座，2-独立办公间，3-独立办公室
    fileList: [],
  } as any
})

const tableData = reactive({
  list: [
    // { name: '111' },
    // { name: '111' },
    // { name: '111' },
    // { name: '111' },
    // { name: '111' },
    // { name: '111' },
    // { name: '111' },
  ]
})

watch(() => props.dialogVisible, (newValue, oldValue) => {
  visible.value = newValue;

})

const ruleFormRef = ref<FormInstance>()

//校验工位类型
const checkType = (rule: any, value: any, callback: any) => {
  if (value == 0) {
    callback(new Error('请选择工位类型'))
  } else {
    callback()
  }

}

//校验工位状态
const checkState = (rule: any, value: any, callback: any) => {
  if (value == 0) {
    callback(new Error('请选择工位状态'))
  } else {
    callback()
  }

}

//校验面积
const checkArea = (rule: any, value: any, callback: any) => {
  const pattern = /^(?!0[0-9])\d+(\.\d+)?$/;
  if (value) {
    if (!pattern.test(value)) {
      callback(new Error("工位面积必须为数字"))
    } else {
      callback()
    }
  } else {
    callback()
  }

}

const rules = reactive<FormRules>({
  roomId: [{ required: true, message: '请选择办公位置', trigger: 'change' }],
  type: [{ required: true, validator: checkType, trigger: 'change' }],
  stationName: [{ required: true, message: '请输入工位名称', trigger: 'blur' }],
  stationNum: [{ required: true, message: '请输入工位编号', trigger: 'blur' }],
  useType: [{ required: true, message: '请选择办公位置类型', trigger: 'change' }],
  state: [{ required: true, validator: checkState, trigger: 'change' }],
  area: [{ validator: checkArea, trigger: 'change' }],
})

//emit(父组件中的自定义方法)
const emit = defineEmits(['closeDialog', 'confirmDialog']);

//关闭弹窗
const handleClose = () => {
  emit("closeDialog");
}

//点击确定按钮
const handleConfirm = async (formEl: FormInstance | undefined) => {

  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {


    } else {
      console.log('error submit!', fields)
    }
  })

}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

//删除函数
const handleRemove = (uploadFile: any, uploadFiles: any) => {
  console.log(uploadFile, uploadFiles)
}

const expanded_keys: any = ref([]);//默认展开项

const defaultProps = {
  children: 'children',
  label: 'label',
}

const platformData = reactive({
  list: [
    {
      label: 'Level one 1',
      children: [
        {
          label: 'Level two 1-1',
          children: [
            {
              label: 'Level three 1-1-1',
            },
          ],
        },
      ],
    },
    {
      label: 'Level one 2',
      children: [
        {
          label: 'Level two 2-1',
          children: [
            {
              label: 'Level three 2-1-1',
            },
          ],
        },
        {
          label: 'Level two 2-2',
          children: [
            {
              label: 'Level three 2-2-1',
            },
          ],
        },
      ],
    },
    {
      label: 'Level one 3',
      children: [
        {
          label: 'Level two 3-1',
          children: [
            {
              label: 'Level three 3-1-1',
            },
          ],
        },
        {
          label: 'Level two 3-2',
          children: [
            {
              label: 'Level three 3-2-1',
            },
          ],
        },
      ],
    },
  ]
})

//勾选平台改变时
const handleCheckChange = (data: any) => {

}

const filterNode = (value: any, data: any) => {
  if (!value) return true
  console.log('data', data);

  return data.name.includes(value)
}
</script>

<style lang="scss" scoped>
.ruleAddDialog {
  :deep(.dialogAdd) {
    width: 900px;
    min-height: 660px;
    position: relative;
    border-radius: 2px;
    background: rgba(255, 255, 255, 1);

    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding: 0;
    }

    .el-button {
      width: 65px;
      height: 32px;
    }

    .my-header {
      height: 59px;
      padding: 8px 32px 4px 62px;
      margin-bottom: 36px;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px dashed rgba(0, 0, 0, 1);

      .title {
        img {
          height: 22px;
          margin: 0 15px 0 0;
        }

        .titleText {
          font-size: 16px;
          line-height: 46px;
          color: rgba(0, 0, 0, 1);
        }
      }
    }

    .dialog_content {
      padding: 0 42px 25px;
      display: flex;
      min-height: 500px;

      .left {
        width: 500px;

        padding-right: 30px;
        height: 100%;

        .btn_ative {
          width: 35px;
          height: 35px;
          line-height: 35px;
          cursor: pointer;
          display: inline-block;
          margin-right: 10px;
          text-align: center;
          margin-top: 4px;
          padding-top: 5px;

          &:last-child {
            margin-right: 0;
          }

          &:hover {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
          }

          .operation_btn {
            height: 20px;

          }
        }

        .table_title {
          margin-bottom: 10px;
        }
      }

      .right {
        flex: 1;
        padding-left: 30px;
        border-left: 1px dashed rgba(0, 0, 0, 0.15);
        .el-input {
          margin: 10px 0;
        }
      }

      .el-form {
        flex-wrap: wrap;

        .el-form-item {
          margin-bottom: 22px;
          // width: 395px;

          .el-radio-group {
            .el-radio {
              &:first-child {
                width: 118px;
              }
            }
          }

          .el-input {
            width: 376px;
          }

          .el-textarea {
            width: 376px;
          }
        }
      }
    }

    .btn {
      position: absolute;
      bottom: 40px;
      right: 77px;

      .el-button--info {
        margin-left: 32px;
      }
    }
  }
}

:deep(.el-upload) {
  --el-upload-picture-card-size: 100px;

  &:hover {
    border-color: rgb(192, 164, 91);
    color: rgb(192, 164, 91);
  }
}
</style>